<template>
	<view class="container" style="position: relative; display: flex; margin-top: 0px;">
		<view class="box">1 2 3 4 5 6</view>
		<view class="box2">1 2 3 4 5 6</view>
		<view class="box3">1 2 3 4 5 6</view>
		
		<!-- <view style="display: flex; width: 100px; height: 100px; background: red;">def</view> -->
	</view>
	
	<!-- <svg width="200" height="200" viewBox="0 0 200 200" style="display: flex; margin-top: 200px;">
	  <rect x="50" y="0" width="100" height="100" fill="red"></rect>
	  <rect x="50" y="100" width="100" height="100" fill="green"></rect>
	  <rect x="0" y="50" width="100" height="100" fill="blue"></rect>
	  <rect x="100" y="50" width="100" height="100" fill="yellow"></rect>
	  <rect x="50" y="50" width="100" height="100" fill="purple"></rect>
	  <rect x="150" y="50" width="100" height="100" fill="orange"></rect>
	</svg> -->
	
	
	
	<view class="cube" style="position: relative; display: flex; margin-top: 200px;">
		<!-- <view class="front" style="display: flex; background-image: linear-gradient(45deg, #f43f3b, #ec008c);"></view> -->
	
		<view class="in-front"></view>
		
		<view class="in-top"></view>
		<view class="in-bottom"></view>
	</view>
	
	<!-- `M0,${this.height / 2} L${points.join(' ')}` d="M10 80 C 20 10, 40 10, 50 80 S 80 10, 110 80"-->
	<svg width="200" height="200" style="display: flex; margin-top: 200px;">
	    <path d="M 10 80 L 20 10" stroke="black" fill="none" />
	</svg>

	<img alt="Vue logo" src="./assets/logo.png" />
	<HelloWorld msg="Hello Vue 3 + Vite" />
	<qrcode-vue :value="'123456'" :size="100" level="H"></qrcode-vue>
	<button @mousedown="mousedown($event)" style=" position: absolute; display: flex;   box-sizing: border-box;  "
		:style="{
			left: left+'px',
			top: top+'px',
		}">
		1234
	</button>
	{{e?e.clientX:''}}


</template>

<script lang="ts" setup>
	import QrcodeVue from 'qrcode.vue'
	import HelloWorld from './components/HelloWorld.vue'
	import { ref, onMounted, onUpdated, computed, reactive, getCurrentInstance, nextTick, defineComponent, onDeactivated } from 'vue'


	let e = ref()
	let left = ref(50)
	let top = ref(400)

	function mousedown(event) {
		// this.$refs.dd.focus()
		// item.focus()

		e.value = event

		left.value = e.value.clientX
		top.value = e.value.clientY

		// canvas.value = item

		console.log("mousedown", event)

		document.addEventListener('mousemove', buttonMoveDrag)
	}

	function buttonMoveDrag(e) {
		left.value = e.clientX
		top.value = e.clientY
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}

	.container {
		/* perspective: 1000px; */
	}

	.box {
		position: absolute;
		display: flex; 
		width: 100px;
		height: 100px;
		background-color: rgba(0, 245, 212, 1);
		transform-style: preserve-3d;
		transform: rotateX(80deg) rotateY(0deg)  rotateZ(0deg) skewX(-20deg);
		transition: transform 5s;
	}
	
	.box2 {
		display: none;
		position: absolute;
		display: flex; 
		width: 100px;
		height: 100px;
		background-color: #3498db;
		transform-style: preserve-3d;
		transform: translateX(50px) translateY(-50px) rotateX(0deg) rotateY(70deg)  rotateZ(0deg) skewY(-10deg);
		transition: transform 5s;
	}
	
	.box3 {
		position: absolute;
		display: flex; 
		width: 100px;
		height: 100px;
		background-color: rgba(0, 245, 212, .6);
		transform-style: preserve-3d;
		transform: translateX(-17px) translateY(-40px) rotateX(0deg) rotateY(0deg)  rotateZ(0deg) skewY(0deg);
		transition: transform 5s;
	}
	
	.cube {
		position: relative;
		display: flex; 
		width: 100px;
		height: 100px;
		position: relative;
		transform: rotateX(-21deg) rotateY(-63deg)  translateZ(0px) skew(0deg);
		transform-style: preserve-3d;
		animation: rotate 20s infinite linear;
		transition: transform 5s;
	}
	
	.cube>view {
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 200px;
		font-size: 40px;
		font-weight: bold;
		color: #FFFFFF;
		background: rgba(0, 245, 212, .6);
		border: 1px solid #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		transition: transform 5s ease-in;
	}
	
	
	.front {
		/* transform: translateZ(100px) */
	}
	
	.in-front {
		transform: translateZ(0px);
	}
	
	.in-top {
		transform: translateY(50px) rotateX(90deg) translateZ(0px);
	}


	
	.in-bottom {
		transform: translateY(-50px) rotateX(-90deg);
	}
	
</style>